<template>
    <div class="background">
    <div class="category">
        <h5>美食百货，随叫随到</h5>
        <ul>
            <li>
                <router-link to="/waimai-view">
                <img src="../assets/img/cate1/waimai.webp" alt="">
                外卖</router-link>
            </li>
            <li>
                <router-link to="/fruit-vegetable-view">
                <img src="../assets/img/cate1/shucaishuiguo.webp" alt="">
                <span>蔬菜水果</span>
                </router-link>
            </li>
            <li>
                <img src="../assets/img/cate1/chaoshibianli.webp" alt="">
                <span>超市便利</span>
            </li>
            <li>
                <img src="../assets/img/cate1/pinzhibaihuo.webp" alt="">
                <span>品质百货</span>
            </li>
            <li>
                <img src="../assets/img/cate1/maiyao.webp" alt="">
                <span>买药</span>
            </li>
        </ul>
    </div>
    </div>
</template>

<script>

    export default {
        name: "CategoryCom1Fls"
    }
</script>

<style scoped>
    .background{
        width: 100vw;
        height: 100px;
        background: linear-gradient(180deg,#ffd000,#f5f5f5);
    }
    h5{
        margin: 0 0 0 5px;
        padding: 0;
    }
    .category{
        width: 96vw;
        height: 90px;
        margin: 0 auto;
        background: #fff;
        border-radius: 10px;
    }
    ul{
        list-style:none;
        display: flex;
        justify-content: space-around;
    }
    li{
        width: 19%;
        height: 85px;
        text-align: center;
        font-size: 14px;
    }
    img {
        width: 90%;
        height: 55%;
        display: block;
        margin-left: 5px;
    }
</style>